<!--
toRaw
1. 作用: 用于获取一个响应式对象的原始对象, toRaw 返回的对象不再是响应式的, 不会触发试图更新.
> 官方描述: 这是一个可以用于临时读取而不引起代理访问/跟踪开销, 或是写入而不触发更改的特殊方法. 
 不建议保存对原始对象的持久引用, 请谨慎使用. 

> 何时使用? 在需要将响应式对象传递给非 Vue 的库或外部系统时, 使用 toRaw 可以确保他们收到的是普通对象.

markRaw
1. 作用: 标记一个对象, 使其永远不会变成响应式的.
> 例如使用mockjs时，为了防止误把mockjs变为响应式对象，可以使用 markRaw 去标记mockjs
-->
<template>
	<div class="app">
	<h2>姓名: {{ person.name }}</h2>
	<h2>年龄: {{ person.age }}</h2>
	<button @click="person.age += 1">修改年龄</button>

	<hr>
	<h2> {{ car2 }}</h2>
	<button @click="car2.price += 10">点我价格+10</button>
	</div>
</template>

<script setup lang="ts" name="App">
import { reactive, toRaw, markRaw } from 'vue';
import mockjs from 'mockjs'

/* toRaw */
let person = reactive({
	name: 'tony',
	age: 18
})

// 用于获取一个响应式对象的原始对象
let rawPerson = toRaw(person)

// console.log('响应式数据', person)
// console.log('原始数据', rawPerson)

function showPerson(p:{name: '', age: 0}) {
	p.age += 10
	p.name += '~'
}

/* markRaw */
let car = markRaw({brand: '奔驰', price: 100 })
let car2 = reactive(car)
let mockJs = markRaw(mockjs)

console.log(car)
console.log(car2)
console.log(mockjs)
</script>

<style scoped>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}
button {
	margin: 0 5px;
}
</style>